<div class="form-group">
  <%= label_tag "#{prefix}[calculator_attributes][preferred_base_percent]",
    Spree.t(:base_percent) %>
  <%= preference_field_tag(
    "#{prefix}[calculator_attributes][preferred_base_percent]",
    calculator.preferred_base_percent,
    type: calculator.preference_type(:base_percent)) %>
</div>

<div class="form-group mb-0">
  <%= label_tag nil, Spree.t(:tiers) %>
  <%= content_tag :div, nil, class: "hidden js-original-tiers",
    data: { :'original-tiers' => Hash[calculator.preferred_tiers.sort] } %>
</div>

<div class="js-tiers"></div>
<button class="btn btn-success js-add-tier"><%= Spree.t(:add) %></button>

<script type="text/x-handlebars-template" id="tier-input-name">
  <%= prefix %>[calculator_attributes][preferred_tiers][{{base}}]
</script>

<script type="text/x-handlebars-template" id="tier-fields-template">
  <div class="tier card mb-3">
    <div class="card-body p-3">
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">$</div>
          </div>
          <input class="js-base-input form-control" type="text" value={{baseField.value}}>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">%</div>
          </div>
          <input class="js-value-input form-control"
            name="{{valueField.name}}" type="text" value={{valueField.value}}>
        </div>
      </div>
      <a class="js-remove-tier btn btn-outline-secondary btn-sm"><span class="icon icon-delete"></span></a>
    </div>
  </div>
</script>
